<template>
	<view>
		<!-- #ifndef APP-PLUS -->
			<uni-nav-bar :shadow="false" :border="false"
			@click-left="clickLeft" @click-right="clickRight">
				<!-- 左边图标 -->
				<block slot="left">
					<view class="iconfont icon-qiandao ml-2 mr-2" style="font-size: 22px;color: #FF4A6A;"></view>
				</block>
				<!-- 中间搜索框 -->
				<view class="flex justify-center align-center rounded text-muted bg-light flex-1 mt-1" style="margin-left: -46upx;height: 60upx;" @tap="openSearch">
					<view class="iconfont icon-sousuo mr-1"></view>搜索用户
				</view>
				<!-- 右边图标 -->
				<block slot="right">
					<view class="text-dark font">取消</view>
				</block>
			</uni-nav-bar>
		<!-- #endif -->
		<view class="flex">
			<view v-for="(item,index) in tabbars" :key="index"
				class="flex-1 flex justify-center align-center py-2 font font-weight-bold"
				:class="index === tabIndex ? 'text-main font-md ': ''" @click="changeTab(index)">{{item.name}}
				<text v-if="item.num > 0" class="ml-1">{{item.num | formate}}</text>
				</view>
		</view>
		<swiper :duration="500" :current="tabIndex" @change="onChangetab" :style="'height:'+scrollH+'px'">
			<swiper-item v-for="(item,index) in newList" :key="index">
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'" @scrolltolower="loadMore(index)">
					<!-- 列表有数据 -->
					<template v-if="item.list.length > 0">
						<!-- 列表组件 -->	
						<block v-for="(item2,index2) in item.list" :key="index2">
							<userList :item="item2" :index="index2" ></userList>
						</block>									
						<!-- 上拉加载更多 -->
						<loadMore v-if="item.list.length" :loadMore="item.loadMore"></loadMore>
					</template>
					<template v-else>
						<nothing></nothing>
					</template>
					
				</scroll-view>
			</swiper-item>
		
		</swiper>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import loadMore from '@/components/common/loadmore.vue'
	import userList from '@/components/user-list/user-list.vue'
	import { mapState } from 'vuex'
	export default {
		components: {
			loadMore,
			userList,
			uniNavBar
		},
		data() {
			return {
				//列表高度
				scrollH: 600,
				tabIndex: 0,
				tabbars: [{
						name: "互关",
						num:0,
						key:"friends"
						
					},
					{
						name: "关注",
						num:0,
						key:"follows"
					},
					{
						name: "粉丝",
						num:0,
						key:"fens"
					}
				],
				newList:[]
			}
		},
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '../search/search?type=user',
			});
		},
		onNavigationBarButtonTap() {
			uni.navigateBack({
				delta: 1
			});
		},
		onLoad() {
			uni.getSystemInfo({
				success(res) {
					this.scrollH = res.windowHeight - uni.upx2px(120)
				}
			})
			this.getData()
			this.getTabList()
		},
		computed:{
			...mapState({
				loginStuatus:state => state.loginStuatus,
				user:state => state.userinfo,
			}),
			//设置默认头像
			avtar(){
				return this.user.userpic ? this.user.userpic :'/static/default.jpg'
			}
		},
		filters: {
			formate(value) {
				return value > 99 ? '99+' : value ;
			}
		},
		methods: {
			// #ifndef APP-PLUS
				clickLeft(){},
				clickRight(){
					uni.navigateBack({
						delta: 1
					});
				},
				openSearch(){
					uni.navigateTo({
						url: '../search/search?type=user'
					});
				},
			// #endif
			//获取tabbar数据
			getTabList(){
				this.$H.get('/user/getcounts/'+this.user.id,{},{
					token:true,
					notoast:true
				}).then(res => {
					this.tabbars[0].num = res.friend_count
					this.tabbars[1].num = res.withfollow_count
					this.tabbars[2].num = res.withfen_count
				})
			},
			changeTab(index) {
				this.tabIndex = index
			},
			//导航栏与列表同步
			onChangetab(e) {
				this.changeTab(e.detail.current)
				if(!this.newList[e.detail.current].firstLoad){
					this.getList()
				}
			},
			//获取数据
			getData() {
				var arr = []
				//模拟获取数据
				for (let i = 0; i < this.tabbars.length; i++) {
					let obj = {
						loadMore: '上拉加载更多',
						list: [],
						page:1,
						firstLoad:false
					}
					arr.push(obj)
				}
				this.newList = arr
				this.getList()
			},
			getList(){
				let index = this.tabIndex
				let page = this.newList[index].page
				let isrefensh = page ===1
				this.$H.get('/'+this.tabbars[index].key+'/'+page,{},{token:true}).then(res => {
					console.log(res)
					let list = res.list.map( v => {
						return {
							user_id:v.id,
							avatar: v.userpic ? v.userpic :'/static/default.jpg',
							username:v.username,
							age:v.age,
							sex:v.sex,
							isFollow:index !== 2
						}
					})
					if(isrefensh){
						this.newList[index].firstLoad = true
					}
					this.newList[index].list = isrefensh ? list : [...this.newList[index].list,...list]
					this.newList[index].loadMore = list.length < 10 ? '没有更多了':'上拉加载更多'
				})
			},
			//上拉加载更多
			loadMore(index) {
				const item = this.newList[index]
				if (item.loadMore !== '上拉加载更多') {
					return
				}
				item.loadMore = '加载中..'
				//模拟加载数据
				item.page++
				this.getList()
			
			},
			
		}
	}
</script>

<style>

</style>
